<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>
<body>
    <h1>拦截器练习</h1>
    <input type="text" id="idt">
    <button id="btn">提交</button>
    
    <script>
        // 创建一个axios实例，并配置这个实例
        const deced=axios.create({
            // 配置基本的路径
            baseURL:"/",
            // 配置超时时间
            timeout:10000,
            // 配置请求头
            headers:{token: 'we.qw.eqw'}
        })
        // 配置拦截器
        deced.interceptors.request.use(function(config){
            //在发送请求之前做些什么
            // 1.获取token,并让请求头携带token
            // const token="crggeggee.debrgtge.debetgetegr";
        //   config是一个对象可以直接用点
             //2.让进度条开始
            NProgress.start();

            // 最后一定要把config再返回出去(放行)
            return config
     // 这里是接受错误或失败的信息
        })

        // 添加一个响应拦截器
        deced.interceptors.response.use(function(response){
            //1.让进度条结束
            NProgress.done();
    //         //2.对请求到的结果进行处理,只拿正确的信息,如果错误的信息,直接交给异常处理
        if (response.data.code !== 10000) {
        return Promise.reject(response.data.msg)
      }
            // 拿到response的想要的数据返回出去
             return response.data.data
        },function(error){
            // 对响应的错误做点什么
            return Promise.reject(error)
        })



        // 请求一个按钮
        const oIpt =document.getElementById("idt")
         const oBtn=document.getElementById("btn")
        //  绑定一个事件  async是异步的意思
        oBtn.onclick=async function(){
            // 把请求发出去 iptValue是请求的值的意思  value 是请求的数据
            const iptValue =oIpt.value;
        // 对它进行一个异步的处理
        try{
            //  请求路径
            const result =await deced.get("/user",{
                // 给他转一个配置
                params:{
                    userId: iptValue
                }
            })
            console.log(result);
        }catch(e){
            console.log(e,"出现错误了");
        }
        }   






        // 总结：
        /*
             headers:{token: 'we.qw.eqw'}如果写这个了就不需要再写重了，
             js里面的如果写了一个判断/如果查询失败
  // if (userId !== "001") {
  //   return res.send({
  //     code: 10001,
  //     msg: "查询失败",
  //     data: null
  //   })
  // }
  那就不会进入到里面了

  
        */ 
    </script>
</body>
</html>